<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />  
    <link rel='stylesheet' type='text/css' href="cupertino/theme.css" />  
    <link rel='stylesheet' type='text/css' href="fullcalendar/fullcalendar.css" />  
    <link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css'  
        media='print' />  
    <script type='text/javascript' src="Scripts/jquery-1.7.1.min.js"></script>  
    <script type='text/javascript' src='Scripts/jquery-ui-1.8.17.custom.min.js'></script>  
    <script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>  
    <script src="Scripts/jquery.query-2.1.7.js" type="text/javascript"></script>  
    <script src="Scripts/jquery.autocomplete.min.js" type="text/javascript"></script>  

<script type='text/javascript'>  
        var _allDay;  
        $(document).ready(function () {  
  
            var date = new Date();  
            var d = date.getDate();  
            var m = date.getMonth();  
            var y = date.getFullYear();  
  
            var calendar = $('#calendar').fullCalendar({  
                header: {  
                    left: 'prev,next today',  
                    center: 'prevYear,title,nextYear',  
                    right: 'month,agendaWeek,agendaDay'  
                },  
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
                monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
                dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
                dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
                today: ["今天"],  
                firstDay: 1,  
                buttonText: {  
                    today: '今天',  
                    month: '月',  
                    week: '周',  
                    day: '日',  
                    prev: '上一月',  
                    next: '下一月'  
                },  
                currentTimezone: 'Asia/Beijing',  
                theme: true,  
                selectable: true,  
                selectHelper: true,  
                select: function (startDate, endDate, allDay, jsEvent, view) {  
                    _allDay = allDay;  
                    var startD = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd HH:mm:ss');  
                    var endD = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd HH:mm:ss');  
                    popupDiv('ObjBox', '事件添加', startD, endD, allDay, "add", "");  
                    //alert(startDate + "|" + window.event.x);  
                },  
                eventClick: function (event) {  
                    var startD = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd HH:mm:ss');  
                    var endD = $.fullCalendar.formatDate(event.end, 'yyyy-MM-dd HH:mm:ss');  
                    popupDiv('ObjBox', '事件编辑', startD, endD, event.allDay, "modify", event);  
                },  
                editable: true,  
                events: 'handeler/CustomerVisitHandeler.ashx?Flag=search&EmployeeID=' + $.query.get('EmployeeID')  
  
            });  
  
        });  
       
    </script> 
        

<style type='text/css'>  
        body  
        {  
            margin-top: 40px;  
            text-align: center;  
            font-size: 14px;  
            font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;  
        }  
          
        #calendar  
        {  
            width: 100%;  
            margin: 0 auto;  
        }  
        .pop-box  
        {  
            z-index: 9999;  
            margin-bottom: fd3px;  
            display: none;  
            position: absolute; /*background: #ffffff;*/  
            border: none;  
        }  
        .finishEvent{background:#f9f9f9}  
        .inputNull{border:1px solid red;}  
        .login-text{ height:24px; width:200px; border:1px solid #e9e9e9; background:#f9f9f9; font-size:15px; padding-left:5px; vertical-align:middle;}  
        .login-text-focus{ border:1px solid #E6BF73;}  
        .panel-c-l td{ padding:4px; padding-left:0px;}  
        .login-text-m{ height:60px; width:200px; border:1px solid #e9e9e9; background:#f9f9f9; font-size:15px; padding-left:5px;}  
    </style>
     
</head>  
<body>  
    <form runat="server" id="calenderForm">  
    <div id='calendar'>  
    </div>  
    <div id="ObjBox" class="pop-box">  
        <table style='-moz-user-select: none;' border='0' cellpadding='0' cellspacing='0'  
            width='300px'>  
            <tr id="_Move_tr_" style='cursor: move;'>  
                <td width='13' height='33' style="background-image: url(images/dialog_lt.png) !important;  
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_lt.png', sizingMethod='crop');">  
                    <div style='width: 13px;'>  
                    </div>  
                </td>  
                <td height='33' style="background-image: url(images/dialog_ct.png) !important; background-image: none;  
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_ct.png', sizingMethod='crop');">  
                    <div style="float: left; font-weight: bold; color: #FFFFFF; padding: 9px 0 0 4px;">  
                        <img src="images/icon_dialog.gif" align="absmiddle"> <a id="PopTitle"></a></div>  
                    <div id='_CloseBtn_1' style="position: relative; cursor: pointer; float: right; margin: 5px 0 0;  
                        _margin: 4px 0 0; height: 17px; width: 28px; background-image: url(images/dialog_closebtn.gif)"  
                        onmouseover="this.style.backgroundImage='url(images/dialog_closebtn_over.gif)'"  
                        onmouseout="this.style.backgroundImage='url(images/dialog_closebtn.gif)'" drag='false'>  
                    </div>  
                </td>  
                <td width='13' height='33' style="background-image: url(images/dialog_rt.png) !important;  
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_rt.png', sizingMethod='crop');">  
                    <div style="width: 13px;">  
                    </div>  
                </td>  
  
            </tr>  
            <tr>  
                <td width='13' style="background-image: url(images/dialog_mlm.png) !important; background-image: none;  
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_mlm.png', sizingMethod='crop');">  
                </td>  
                <td align='center' valign='top'>  
                    <table width='100%' style="height: 100%;" border='0' cellpadding='0' cellspacing='0'  
                        bgcolor='#FFFFFF'>  
                        <tr id='_MessageRow_1' style='display: none'>  
                            <td height='50' valign='top'>  
                                <table id='_MessageTable_1'  width='100%' border='0' cellspacing='0' cellpadding='8'  
                                    style="background: #EAECE9 url(images/dialog_bg.jpg) no-repeat right top;">  
                                    <tr>  
                                        <td width='25' height='50' align='right'>  
                                            <img alt="close" id='_MessageIcon_1' src='images/window.gif' width='32' height='32'>  
                                        </td>  
                                        <td align='left' style='line-height: 16px;'>  
                                            <h5 class='fb' id='_MessageTitle_1'>  
                                                 </h5>  
                                            <div id='_Message_1'>  
                                                 </div>  
                                        </td>  
                                    </tr>  
                                </table>  
                            </td>  
                        </tr>  
                        <tr>  
                            <td align='center' valign='top'>  
                               <div class="panel-c-l" Customer_Code="-1" Employee_ID="-1">  
                                 <table cellpadding="0" cellspacing="0">  
                        <tbody>  
                        <tr>  
                             <td colspan="2" style=" height:3px;"></td>  
                            </tr>   
                         <tr>  
                             <td style=" padding:0px; text-align:right;" >客户：</td><td align="left"><input type="text"   id="txtCustomerName" class="login-text" /></td>  
                            </tr>   
                            <tr>  
                            <td style=" padding:0px; text-align:right;">开始：</td><td align="left"><input type="text"  id="txtStartTime" class="login-text" /></td>  
                            </tr>  
                            <tr>  
                            <td style=" padding:0px; text-align:right;">结束：</td><td align="left"><input type="text"  id="txtEndTime" class="login-text" /></td>  
                            </tr>   
                             <tr>  
                            <td style=" padding:0px; text-align:right; vertical-align:middle;">描述：</td><td align="left"><asp:TextBox runat="server" ID="txtDescrible"  CssClass="login-text-m" TextMode="MultiLine"></asp:TextBox></td>  
                            </tr>   
                            <tr>  
                             <td colspan="2" style=" height:3px;"></td>  
                            </tr>   
                        </tbody>  
                    </table>  
                    </div>  
                            </td>  
                        </tr>  
                        <tr id='_ButtonRow_1'>  
                            <td height='36'>  
                                <div id='_DialogButtons_1' style='text-align: center; border-top: #dadee5 1px solid;  
                                    padding: 8px 20px; background-color: #f6f6f6;'>  
                                    <input id='_ButtonOK_1' type='button' value='确 定' />  
                                    <input id='_ButtonCancel_1' type='button' value='取 消' />  
                                </div>  
                                <div id='_DialogButton_2' style='text-align: center; border-top: #dadee5 1px solid; display:none;  
                                    padding: 8px 20px; background-color: #f6f6f6;'>  
                                    <input id='_Button_delete_' type='button' value='删 除' />  
                                    <input id='_Button_modify_' type='button' value='修 改' />  
                                    <input id='_Button_Cancel_2' type='button' value='取 消' />  
                                </div>  
                            </td>  
                        </tr>  
                    </table>  
                </td>  
                <td width='13' style="background-image: url(images/dialog_mrm.png) !important; background-image: none;  
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_mrm.png', sizingMethod='crop');">  
                </td>  
            </tr>  
            <tr>  
                <td width='13' height='13' style="background-image: url(images/dialog_lb.png) !important;  
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_lb.png', sizingMethod='crop');">  
                </td>  
                <td style="background-image: url(images/dialog_cb.png) !important; background-image: none;  
                    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_cb.png', sizingMethod='crop');">  
                </td>  
                <td width='13' height='13' style="background-image: url(images/dialog_rb.png) !important;  
                    background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/dialog_rb.png', sizingMethod='crop');">  
                </td>  
            </tr>  
        </table>  
    </div>  
    </form>  
</body>  
</html> 
<script type="text/javascript">    
    function popupDiv(div_id, title, Tstart, Tend, TallDay, eType, event) {  
        var div_obj = $("#" + div_id);  
        $("#PopTitle").html(title);         
        $("#txtStartTime").val(Tstart);  
        $("#txtEndTime").val(Tend);  
        $("#txtCustomerName").css("border", "1px solid #e9e9e9");  
        if (eType == "add") {  
            $("#txtCustomerName").val("");  
            $("#txtDescrible").val("");  
            $(".panel-c-l").attr("Customer_Code", "-1");  
            $("#_DialogButtons_1").css("display", "block");  
            $("#_DialogButton_2").css("display", "none");  
        } else {  
            $("#txtCustomerName").val(event.title);  
            $("#_DialogButtons_1").css("display", "none");  
            $("#_DialogButton_2").css("display", "block");  
            $("#txtDescrible").val(event.VisitDescrib);  
        }  
        var windowWidth = document.documentElement.clientWidth;  
        var windowHeight = document.documentElement.clientHeight;  
        var popupHeight = div_obj.height();  
        var popupWidth = div_obj.width();  
        div_obj.css({ "position": "absolute" })  
    .animate({ left: windowWidth / 2 - popupWidth / 2, top: windowHeight / 2 - popupHeight / 2, opacity: "show" }, "show");  
  
    }  
    $("#_ButtonOK_1").click(function () {  
        if ($("#txtCustomerName").val() == "" || $(".panel-c-l").attr("Customer_Code")=="-1") {  
            $("#txtCustomerName").css("border", "1px solid red");  
            return;  
        }  
        var calEvent = {  
            title: $("#txtCustomerName").val(),  
            start: $("#txtStartTime").val(),  
            end: $("#txtEndTime").val(),  
            allDay: _allDay  
        };  
        $('#calendar').fullCalendar('renderEvent', calEvent, true);  
        hideDiv('ObjBox');  
        $.get(  
        'handeler/CustomerVisitHandeler.ashx?Flag=new',  
        {  
            "CustomerID": $(".panel-c-l").attr("Customer_Code"),  
            "EmployeeID": $(".panel-c-l").attr("Employee_ID"),  
            "VisitTypeID": '0',  
            "VisitDescrib": $("#txtDescrible").val(),  
            "VisitBeginTime": $("#txtStartTime").val(),  
            "VisitEndTime": $("#txtEndTime").val(),  
            "AllDayEvent":_allDay  
        },  
        function (data) {  
            alert(data);  
        },  
        'json'  
        );  
    });  
    $("#_CloseBtn_1").click(function () {  
        hideDiv('ObjBox');  
    });  
    $("#_Button_Cancel_2").click(function () {  
        hideDiv('ObjBox');  
    });  
    $("#_ButtonCancel_1").click(function () {  
        hideDiv('ObjBox');  
    });  
    function hideDiv(div_id) {  
  
        $("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow"); //关闭弹出的DIV  
    }  
</script>  
<script type="text/javascript">  
         var Customer;  
         var option = {  
             max: 10,  
             width: 200,  
             minChars: 1,  
             autoFill: false,  
             scroll: false,  
             matchContains: true,  
             delay: 100,  
             selectFirst: false,  
             formatItem: function (row, rowNum, rowCount, searchItem) {  
                 // return row.CustomerName || row.CustomerPY;  
                 return "<table><tr><td align='left'>" + row.CustomerName + "</td></tr></table>";  
  
             },  
             formatMatch: function (row, rowNum, rowCount) {  
                 return row.CustomerName;  
             },  
             formatResult: function (row, rowNum, rowCount) {  
                 return row.CustomerName;  
             }  
         };  
  
         function initAutoComplete(data) {  
             Customer = data;  
             $("#txtCustomerName").autocomplete(Customer, option);  
             $("#txtCustomerName").result(function (event, data, formatted) {  
                 //alert(data.CustomerCode);  
                 $(".panel-c-l").attr("Customer_Code", data.CustomerID);  
                 //alert($(".panel-c-l").attr("Customer_Code"));  
             });  
         }  
  
         $(function () {  
             $.getJSON("handeler/CustomerHandler.ashx", null, initAutoComplete);  
         })  
</script>  
<script type="text/javascript">    
    var bool = false;  
    var offsetX = 0;  
    var offsetY = 0;  
    $('document').ready(function() {  
        $("#_Move_tr_").mousedown(function (event) {  
            bool = true;  
            offsetX = event.offsetX ? event.offsetX : event.layerX;  
            offsetY = event.offsetY ? event.offsetY : event.layerY;  
            $("#_Move_tr_").css('cursor', 'move');  
        })  
        .mouseup(function() {  
            bool = false;  
        })  
        $(document).mousemove(function(event) {  
            if (!bool) {  
                return;  
            }  
            else {  
                var x = event.clientX - offsetX;  
                var y = event.clientY - offsetY;  
                $("#ObjBox").css("position", "absolute");  
                $("#ObjBox").css("left", x);  
                $("#ObjBox").css("top", y);  
            }  
        })  
    });  
</script>  
<script type="text/javascript">  
    var Calender_View;  
    function Remove_Events() {          
        if (jQuery('#calendar').fullCalendar('getView').name == Calender_View) {  
            //alert(Calender_View);  
            $("#calendar").fullCalendar('removeEvents');  
        }   
    }  
    $(document).ready(function () {  
        Calender_View = jQuery('#calendar').fullCalendar('getView').name;  
        $(".panel-c-l").attr("Employee_ID", $.query.get('EmployeeID'));  
        jQuery('.fc-button-prev').bind('click', Remove_Events);  
        jQuery('.fc-button-next').bind('click', Remove_Events);  
        jQuery('.fc-button-today').bind('click', Remove_Events);     
  
    });  
</script>  